<template>
    <div class="home">
        <div class="home-box flex" v-show="main">
            <!-- <MapWorld class="flex-left"></MapWorld> -->
            <!-- <AMap class="flex-left"></AMap> -->
            <div class="home-navigation flex-right">

                <div class="navigation-box" v-if="false">
                    <el-popover ref="popover" placement="right" :width="400" trigger="manual" :offset="-1"
                        :visible="visible">
                        <template #reference>
                            <el-button class="hnli hn1" @click="visible = !visible">
                                <div><img class="icon" src="@/assets/img/right.png" /></div>
                                <div><img class="icon" src="@/assets/img/micon.png" @click="setFull(2, true)"
                                        @click.stop.prevent /></div>
                                <div><img class="icon" src="@/assets/img/camera.png" /></div>
                                <text class="vertical-text">监控传感器列表</text>
                            </el-button>
                        </template>
                        <template #default>
                            <div class="hnli-popup hp1">
                                <el-carousel indicator-position="outside">
                                    <el-carousel-item v-for="item in monitoring" :key="item" class="monitoring-box">
                                        <img class="mb-img" :src="item.url" />
                                        <div class="mb-end">{{ item.name }}</div>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </template>
                    </el-popover>
                </div>


                <div class="navigation-box">
                    <el-popover ref="popover" placement="right" :width="400" trigger="manual" :offset="-1"
                        :visible="visible2">
                        <template #reference>
                            <el-button class="hnli hn2" @click="visible2 = !visible2">
                                <div><img class="icon" src="@/assets/img/right.png" /></div>
                                <text class="vertical-text">基地列表</text>
                            </el-button>
                        </template>
                        <template #default>
                            <div class="hnli-popup hp2 flex-s">
                                <div class="schedule">
                                    <div class="schedule-text">总计</div>
                                    <div><text class="schedule-num">{{ scheduleNum }}</text>台</div>
                                </div>
                                <div class="flex ">
                                    <div v-for="item in scheduleArray" class="flex">
                                        <div>
                                            <ProgressBar :size="90" :strokeWidth="15" :percentage="item.percentage"
                                                :color="item.color" :text="item.name" style="margin: 0 10px;"></ProgressBar>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </template>
                    </el-popover>
                </div>

                <div class="navigation-box">
                    <el-popover ref="popover" placement="right" :width="400" trigger="manual" :offset="-1"
                        :visible="visible3">
                        <template #reference>
                            <el-button class="hnli hn3" @click="visible3 = !visible3">
                                <div><img class="icon" src="@/assets/img/right.png" /></div>
                                <text class="vertical-text">搜索</text>
                            </el-button>
                        </template>
                        <template #default>
                            <div class="hnli-popup hp3">
                                <div class="flex">
                                    <input v-model="inputSearch" class="search" placeholder="输入电台ID/电台名称/地点">
                                    <img class="icon" src="@/assets/img/search.png" />
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </div>


                <div class="navigation-box">
                    <el-popover ref="popover" placement="right" :width="400" trigger="manual" :offset="-1"
                        :visible="visible4">
                        <template #reference>
                            <el-button class="hnli hn4" @click="visible4 = !visible4">
                                <div><img class="icon" src="@/assets/img/right.png" /></div>
                                <div @click="setFull(1, true)" @click.stop.prevent><img class="icon"
                                        src="@/assets/img/micon.png" /></div>
                                <text class="vertical-text">电台列表</text>
                            </el-button>
                        </template>
                        <template #default>
                            <TelegramList :tableData="tableData" :total="total" :inputSearch="inputSearch"></TelegramList>
                        </template>
                    </el-popover>
                </div>


            </div>
        </div>
        <Camera class="shadow-pop" v-show="cameraData.show" @setCameraShow="setCameraShow"></camera>
        <TelegramListFull class="shadow-pop" v-show="ListFull" :tableData="tableData" :total="total"
            @setListShow="setListShow"></TelegramListFull>
        <MapPopup :data="MapPopupData" @closeMapPopup="closeMapPopup" v-show="MapPopupData.show"></MapPopup>


    </div>
</template>
    
<script>
import MapWorld from '@/components/MapWorld/index.vue'
import AMap from '@/components/AMap/AMap.vue'
import TelegramList from '@/components/TelegramList/index.vue'
import TelegramListFull from '@/components/TelegramList/full.vue'
import MapPopup from '@/components/MapPopups/index.vue'
import ProgressBar from '@/components/ProgressBar/index.vue';
import Camera from '@/components/Camera/index.vue';

export default {
    name: 'chart',
    data() {
        return {
            id: '0',
            visible: false,
            monitoring: [
                { name: "地区1", img: "./img/fj1.png" },
                { name: "地区2", img: "./img/fj2.png" },
                { name: "地区3", img: "./img/fj3.png" },
            ],
            visible2: false,
            scheduleNum: 100,
            scheduleArray: [
                { name: "在线电台", color: "#2BA0C8", percentage: 70 },
                { name: "离线电台", color: "#CD6868", percentage: 30 },
            ],
            visible3: false,
            inputSearch: '',
            visible4: false,
            tableData: [
                { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 1 },
                { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 0 },
                { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 2 },
                { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 1 },
                { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 3 },
                { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 1 },
                { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 2 },
                { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 0 },
                { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 1 },
                { id: 'f001', name: '重庆渝北001', pattern: '定时传输', state: 3 },
                { id: 'f001', name: '重庆渝北001', pattern: '公共服务', state: 3 },
                { id: 'f001', name: '重庆渝北001', pattern: '连续探测', state: 0 },
                { id: 'f001', name: '重庆渝北001', pattern: '实时传输', state: 1 },
            ],
            total: 1000,
            main: true,
            ListFull: false,
            dialogVisible: true,
            MapPopupData: {
                show: true,
                type: 1,
                state: 0,
                temperature: 32,
                electricity: 2.2,
                voltage: 2.3,
                power: 2,
                frequency: 2.1,
                name: '重庆万州电台F006',
                location: '39°52′48″N,116°24′20″E'
            },
            cameraData: {
                show: false,
            }

        }
    },

    components: {
        TelegramList,
        MapWorld,
        TelegramListFull,
        AMap,
        MapPopup,
        ProgressBar,
        Camera,
    },

    methods: {
        setFull(index, value) {
            if (index == 1) {
                this.visible4 = false;
                this.ListFull = value;
                this.main = !value;
                this.cameraData.show = false;
            } else if (index == 2) {
                this.visible4 = false;
                this.cameraData.show = value;
                this.ListFull = false;
                this.main = !value;
            }
        },
        setListShow(value) {
            this.setFull(1, false)
        },
        setCameraShow(value) {
            this.setFull(2, false)
        },
        radioListAll() {//电台集合
            const data = {
                keywords: null,
            }
            this.$request.get(this.$urlApi.radio.listAll, data)
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log(res.data);
                    }

                }).catch(error => {
                    // 处理 Promise 拒绝的情况
                });
        },
        closeMapPopup(value) {
            this.MapPopupData.show = value;
        }



    },
    mounted() {
        // this.radioListAll();
    },
}
</script>

<style lang="scss" scoped></style>
    